import {useState,useEffect} from 'react'
import { NavBar,Search  } from 'react-vant';
import {useNavigate,useSearchParams} from 'react-router-dom'
import axios from 'axios';
import styles from './huati.module.css'
export default function Huati_xiang() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')
  console.log(id);
  const [tiezi,setTiezi]=useState([])
  const [huati,setHuati]=useState([])
  useEffect(()=>{
    gettiezi()
    gethuati()
  },[])
  let gettiezi = async () => {
    let {data}=await axios.get('http://localhost:3000/findtiezi',{params:{_id:id}})
    console.log(data);
    if(data.code===200){
      setTiezi(data.data)
    }
  }
  let gethuati = async () => {
    let {data}=await axios.get('http://localhost:3000/findhuati',{params:{_id:id}})
    console.log(data);
    if(data.code===200){
      setHuati(data.data)
    }
  }
  return (
    <>  
        <div className={styles.big_box}>
          <NavBar
              title="热门话题"
              leftText="返回"
              onClickLeft={() => navigate('/huati')}
          />

          <div className={styles.box}>
              <h2 style={{padding:'20px'}}>{
                huati.map((item)=>{
                  return <span key={item._id}>#{item.name}</span>
                })
              }</h2>
              <div className={styles.sbox}><p style={{fontSize:'16px'}}>非物质文化遗产（Intangible Cultural Heritage），简称 “非遗”，是指被各社区、群体，有时是个人，视为其文化遗产组成部分的各种社会实践、观念表述、表现形式、知识、技能以及相关的工具、实物、手工艺品和文化场所</p></div>
          </div>

          {
            tiezi.map((item)=>{
              return <div  key={item._id} className={styles.box1}>
              <div className={styles.box2}>
                {/* 头像 */}
                <div className={styles.box3}>
                    <div className={styles.touxiang}>
                      <img src='/public/1.png' style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                    </div>
                    <div style={{margin:'20px'}}>
                      <h3 style={{marginBottom:'10px',marginLeft:'10px'}}>{item.username}</h3>
                      <span>{item.time}</span>
                    </div>
                </div>
                <button className={styles.btn}>+关注</button>
              </div>
              {/* 动态内容 */}
              <div>
                <div>
                  {
                    huati.map((item)=>{
                      return <h3 key={item._id}>#{item.name}</h3>
                    })
                  }
                  <p style={{fontSize:'16px'}}>{item.content}</p>
                </div>
                {
                  item.img.map(item=>{
                    return <img key={item._id} style={{width:'100px',height:'100px',margin:'20px',borderRadius:'10px'}} src={item} alt="" />
                  })
                }
              </div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  {/* 转发数 */}
                  <div style={{display:'flex',alignItems:'center'}}>
                    <svg t="1739790386357" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4219" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#231F20" p-id="4220"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#231F20" p-id="4221"></path></svg>
                    {item.zhuanfa}
                  </div>
                  <div style={{display:'flex'}}>
                    {/* 收藏数 */}
                    <div style={{display:'flex',alignItems:'center'}}>
                      <svg t="1739790688231" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5211" width="200" height="200"><path d="M454.613333 96.682667l-110.122666 223.146666-246.272 35.797334a64 64 0 0 0-35.456 109.141333l178.176 173.696-42.069334 245.290667a64 64 0 0 0 6.442667 40.576l3.114667 5.333333a64 64 0 0 0 83.328 21.546667L512 835.413333l220.245333 115.797334a64 64 0 0 0 92.885334-67.456l-42.069334-245.290667 178.176-173.653333a64 64 0 0 0-35.456-109.226667l-246.272-35.754667-110.08-223.146666a64 64 0 0 0-114.816 0zM512 173.226667l91.008 184.362666 3.328 6.144a85.333333 85.333333 0 0 0 60.928 40.533334l203.434667 29.525333-147.2 143.573333-4.821334 5.077334a85.333333 85.333333 0 0 0-19.712 70.442666l34.730667 202.624-201.813333-106.069333-4.778667-2.133333a42.666667 42.666667 0 0 0-34.986667 2.133333L290.304 855.466667l34.773333-202.624 0.896-6.912a85.333333 85.333333 0 0 0-25.429333-68.608l-147.242667-143.573334 203.52-29.525333a85.333333 85.333333 0 0 0 64.213334-46.677333L512 173.226667z" fill="#000000" p-id="5212"></path></svg>
                      {item.zan}
                    </div>
                    {/* 喜欢数 */}
                    <div style={{display:'flex',alignItems:'center',margin:'20px'}}>
                      <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg>
                      {item.like}
                    </div>
                    {/* 评论数 */}
                    <div style={{display:'flex',alignItems:'center'}}>
                      <svg t="1739790811549" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14125" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#000000" p-id="14126"></path></svg>
                      {item.pinglun}
                    </div>
                  </div> 
                </div>
            </div>
            })
          }
        </div>
        

    </>
  )
}
